<script setup>
  import {ref,toRefs,computed,watch} from 'vue'
	import {useShoppingCartStore } from '@/stores/shoppingCart.js'
	import {storeToRefs} from 'pinia'

  const props = defineProps({
    data:{
      type:Object,
			// todo:这里是null，会疯狂报错，我真的搞不懂,可能看了源码之后能有解释
      default:() => ({})
    },
    scene:{
      type:String,
      default:'menu' // menu | cart
    }
  })
	const emit = defineEmits(['click','actionClick'])

  const {data,scene} = toRefs(props)
	const {goodList} = storeToRefs(useShoppingCartStore())
	const numInCart = computed(() => {
		 const exsitItem = goodList.value.find(item => item.id === data.value.id)
		 if(!exsitItem){
			return 0
		 }
		return exsitItem.buyNumber
	})

	function handleItemClick(){
		const dataStr = JSON.stringify(data.value)
		uni.navigateTo({
			 url: `/pages/menu/GoodDetailPage?data=${dataStr}`
		})
		// if(scene.value === 'menu'){
		// 	addGood(data.value)
		// 	return
		// }
		// addGood(data.value)
	}

</script>
<template>
  <view class="goods-item" @click="handleItemClick">
		<!-- 单选框功能，仅仅在购物车场景下开起 -->
		 <!-- todo:单选框 -->
    <image src="@/static/good-demo.png"></image>
    <view class="info">
      <view class="label">{{ data.name }}</view>
      <view class="description">{{ data.description }}</view>
      <view class="price">
        <text class="price-unit">¥</text><text class="price-now">{{ data.price }}</text>
        <text class="price-origin">面价¥{{ data.originPrice }}</text>
      </view>
    </view>
		<view class="action">
			<!-- 菜单场景 -->
			<view v-if="scene === 'menu'">
				<view v-if="numInCart" class="menu-num-in-cart">
					<uni-badge  size="small" :text="numInCart" absolute='rightTop'  type="primary">
						<uni-icons type="plus-filled" color="#0022AB" size="28"></uni-icons>	
					</uni-badge>
				</view>
				<view v-else>
						<uni-icons type="plus-filled" color="#0022AB" size="28"></uni-icons>	
				</view>
			</view>

			<!-- 购物车场景 -->
			<view v-else class="action-in-cart">
				<label @click.stop="data.buyNumber -= 1">
					<uni-icons type="minus-filled" color="#0022AB" size="28" ></uni-icons>	
				</label>
				<text>{{ numInCart }}</text>
				<label @click.stop="data.buyNumber += 1">
					<uni-icons type="plus-filled" color="#0022AB" size="28" ></uni-icons>	
				</label>
			</view>
		</view>
  </view>
</template>
<style lang="less" scoped>
			.goods-item {
				padding:10rpx 5rpx;
				display:flex;
				position: relative;
				image {
					@size:180rpx;
					width:@size;
					height:@size;
					margin-right:20rpx;
				}
				.info {
					position: relative;
					flex:1;
					.label {
						font-size:30rpx;
						font-weight:700;
						padding-top:30rpx;
					}
					.description {
						color:#999999;
						font-size: 20rpx;
					}
					.price {
						position: absolute;
						bottom:0;
						width:100%;
						.price-unit {
							color:#F95731;
							font-size:20rpx;
							font-weight:700;
							margin-right:6rpx;
						}
						.price-now {
							color:#F95731;
							font-size:40rpx;
							font-weight:700;
							margin-right:6rpx;

						}
						.price-origin {
							color:#999999;
							font-size:20rpx;
							text-decoration: line-through;
						}
					}
				}
				.action {
					position:absolute;
					bottom:10rpx;
					right:40rpx;
					// 菜单列表场景下，显示角标，修正z-index
					.menu-num-in-cart {
						::v-deep .uni-badge {
							z-index:400 !important;
						}
					}

					.action-in-cart {
						display:flex;
						align-items: center;
						text {
							margin:0 8rpx;
						}
					}
				}
			}
</style>